<template>
	<div class="old-wrap" ref="oldWrap">
		<y-open-app  v-if="oldThingsData.kid" :id="oldThingsData.shelveFlag  || oldThingsData.delFlag ? '' : oldThingsData.kid" routerAddr="SquareScreen" passprops="targetKid"/>
		<div class="old-info"  v-if="!oldThingsData.shelveFlag &&　!oldThingsData.delFlag">
			<div class="user-wrap">
				<img :src="userData.userImg" class="user-img">
				<div class="user-infobox">
					<p class="user-name">{{userData.userNickName}}</p>
					<span class="time"  v-if="oldThingsData.createDate"> {{oldThingsData.createDate | transformTime }}</span>
				</div>
			</div>
			<p class="old-text">
				{{oldThingsData.content}}
			</p>
			<div class="old-content">
				<div class="imgWrap">
					<img :src="oldThingsData.imgUrl" class="old-img">
					<div class="lableList">
						<div v-for="(item, index) of labelList" class="labelitem" :key="index" >
							<div class="labe-direction" :style="setPosition(item)" v-if="JSON.parse(item.labelExt).direction">
								<img src="./assets/label-point.png" class="point">
								<div class="right">
									<div class="line"></div>
									<div class="arrow-r"></div>
									<div class="lable-text">
										<span :class="['iconfont', 'lableicon', iconLabelTypeName[item.labelType]]"></span>{{item.labelContent}}
									</div>
								</div>
							</div>
							<div class="labe-direction" v-if="!JSON.parse(item.labelExt).direction" :style="setPositionRight(item)">
								<div class="left">
									<div class="lable-text">
										<span :class="['iconfont', 'lableicon', iconLabelTypeName[item.labelType]]"></span>{{item.labelContent}}
									</div>
									<div class="arrow-l"></div>
									<div class="line"></div>
								</div>
								<img src="./assets/label-point.png" class="point">
							</div>
						</div>
					</div>
				</div>
				<p class="old-time"  v-if="oldThingsData.location">
						<span class="addr"><span class="iconfont icon-position"></span> {{oldThingsData.location}}</span>
				</p>
				<div class="user-habit">
					<p class="likeStatus" @click="openAppSquare">
						<span :class="['iconfont', 'icon-disscuss-new']" ></span>
						<span class="lile-text" v-if="oldThingsData.kid">{{oldThingsData.statisticResult.commentCount | reformNum }}</span>
					</p>
					<p class="likeStatus" @click="openAppSquare">
						<span :class="['iconfont', 'icon-like-new']"></span>
						<span class="lile-text" v-if="oldThingsData.kid">{{oldThingsData.statisticResult.likeCount | reformNum }}</span>
					</p>
					<p class="likeStatus" @click="openAppSquare">
						<span :class="['iconfont', 'icon-share-new']"></span>
					</p>
				</div>
			</div>
		</div>
		<div class="shelve-wrap" v-if="oldThingsData.shelveFlag || oldThingsData.delFlag">
			<img src="./assets/request_delete.png" class="delete-img">
			<p class="shelve-text">该内容已被 {{ oldThingsData.delFlag ? '删除' : '下架' }}</p>
		</div>
		<y-comment v-if="oldThingsData.kid" :targetKid="$route.params.id"  targetType="oldThing" />
		<y-viewmore  v-if="oldThingsData.kid" :id="oldThingsData.shelveFlag  || oldThingsData.delFlag ? '' : oldThingsData.kid" routerAddr="SquareScreen"  passprops="targetKid"/>
	</div>
</template>

<script>
	
import YForward from '@/components/forward/main'
import YComment from './components/comment'
import YViewmore from './components/view-more'
import YOpenApp from './components/open-app'
import transformTime from '@/filters/transformTime'
import { handleOpenApp } from '../../js/open-app'
export default {
	components: {
		YForward,  YComment, YViewmore, YOpenApp
	},
	data() {
		return {
			oldThingsData: {},
			userData: {},
			commentData: [],
			userBehaviorResult: {},
			iconLabelTypeName: [
				' ',
				'icon-pic',
				'icon-play',
				'icon-book',
				'icon-music',
				'icon-movie',
				'icon-position',
			],
			labelList: [],
		}
	},
	methods: {
		setPosition(item) {
			return {
				position: 'absolute',
				top: (JSON.parse(item.labelExt).coordinate.y * 100) + '%',
				left: (JSON.parse(item.labelExt).coordinate.x * 100) + '%',
				zIndex: JSON.parse(item.labelExt).level
			}
		},
		setPositionRight(item) {
			return {
				position: 'absolute',
				top: (JSON.parse(item.labelExt).coordinate.y * 100) + '%',
				right: (100 - JSON.parse(item.labelExt).coordinate.x * 100) + '%',
				zIndex: JSON.parse(item.labelExt).level
			}
		},

		openAppSquare() {
			let args = {
				routerAddr: 'SquareScreen',
				props: {	targetKid: this.oldThingsData.kid }
			}
			handleOpenApp(args)
		}
	},
	async created() {
		let res = await this.$http(`/lovelorn/v1.3/pb/old-things/${this.$route.params.id}`);
		let data = res.data.data;
		this.oldThingsData = data || {};
		this.userData = data.userRelationVO;
		this.commentData = data.commentList;
		this.userBehaviorResult = data.userBehaviorResult;
		this.labelList = this.oldThingsData.labelList;
		let {content} = this.oldThingsData;
		if (this.$utils.isWeiXin()) {
			this.$utils.wxShare({
				title: '拾恋APP-有人给你分享了一个帖子，快来看看吧',
				desc: content,
				link: `${window.location.origin}/oldthings-share/${this.oldThingsData.kid}`,
				imgUrl: this.oldThingsData.imgUrl, 
			})
		}
	},
}
</script>

<style type="text/css" scoped>
@import "../../css/var.css";
.old-wrap {
	min-height: 100vh;
	& .old-info {
		background: #fff;
		/* padding: 0.4rem 0.3rem 0.3rem; */
		& .user-wrap {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 0.3rem;

				& .user-infobox {
					display: flex;
					flex-direction: column;
					& .time {
						font-size: 0.22rem;
						color: #999;
						margin-top: 0.1rem;
					}
				}
		}

		& .user-img {
			width: 0.64rem;
			height: 0.64rem;
			border-radius: 0.32rem;
			background: #eee;
			margin-right: 0.2rem;
		}

		& .user-name {
			font-size: 0.26rem;
			color: #000;
			font-weight: 700;
			line-height: 1;
		}

		& .old-content {
			padding-bottom: 0.4rem;
		}

		& .old-img {
			position: absolute;
			top: 50%;
			left: 50%;
			min-width: 100%;
			min-height: 100%;
			display: block;
			transform: translate(-50%,-50%);
		}

		& .old-time {
			margin-top: 0.3rem;
			font-size: 0.24rem;
			padding: 0 0.3rem;
			color: #999;
			line-height: 1;
			display: flex;
			justify-content: space-between;
			& .icon-position{
				font-size: 0.22rem;
				color: #ccc;
			}
			& .addr {
				height: 0.4rem;
				background: #f4f4f4;
				padding: 0 0.2rem;
				border-radius: 0.1rem;
				line-height: 0.4rem;
				color: #333;
			}
		}

		& .old-text {
			position: relative;
			margin: 0 0.3rem 0.2rem;
			font-size: 0.3rem;
			color: #000;
			line-height: 0.46rem;
			text-align: justify;
		}

		& .old-text-morebtn {
			position: absolute;
			right: 0;
			bottom: 0;
			background: #fff;
			color: #d4c2f2;
			
		}

		& .likeStatus {
			padding: 0 0.3rem;
			margin-top: 0.36rem;
			display: flex;
			align-items: center;
			line-height: 0.32rem;

			& .iconfont {
				font-size: 0.48rem;
				color: #000;
			}
			
			& .lile-text {
				font-size: 0.22rem;
				color: #666;
				margin-left: 0.1rem;
				position: relative;
				top: -0.03rem;
			}
		}
	}
	& .imgWrap {
		position: relative;
		height: 7.68rem;
		width: 100%;
		overflow: hidden;

		& .lableList {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			& .labelitem {
				display: flex;
				align-items: center;
				/* position: absolute; */
			}
			

			& .labe-direction {
				display: flex;
				align-items: center;

				& .right {
					display: flex;
					align-items: center;
					justify-content: center;
					& .lable-text {
						padding-right: 0.14rem;
					}
				}

				& .left {
					display: flex;
					align-items: center;
					justify-content: center;
					& .lable-text {
						padding-left: 0.14rem;
					}
				}
				& .line {
					width: 0.16rem;
					height: 2px;
					background: rgba(0, 0, 0, 0.6);
				}
				& .arrow-l {
					width: 0.25rem;
					height: 0.46rem;
					background: url('./assets/arrow.png') no-repeat center;
					background-size: 0.25rem 0.46rem;
					transform: rotate(180deg);
				} 
				& .arrow-r {
					width: 0.25rem;
					height: 0.46rem;
					background: url('./assets/arrow.png') no-repeat center;
					background-size: 0.25rem 0.46rem;
				} 
				& .point {
					animation-name: pointAnimation;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
					animation-duration: 0.6s;
					animation-direction: alternate;
					display: inline;
					width: 0.26rem;
					height: 0.26rem;
				}
			}
		}

		& .lable-text {
			/* line-height: 0.46rem; */
			height: 0.46rem;
			font-size: 0.2rem;
			color: #fff;
			background: url('./assets/label-bg.png') repeat left center;
			display: flex;
			align-items: center;
			justify-content: center;
			& .lableicon {
				font-size: 0.2rem;
				margin-right: 0.06rem;
			}
		}
	}
	& .shelve-wrap {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 3rem;

			& .shelve-text {
				font-size: 0.3rem;
				margin-top: 0.74rem;
				color: #666;
				text-align: center;
			}
		}

		& .delete-img {
			width: 2.38rem;
			height: 2.82rem;
		}

		& .user-habit {
			display: flex;
		}
}
@keyframes  pointAnimation {
	0% {
		transform: scale(1)
	}
	100% {
		transform: scale(1.2)
	}
}

</style>